<!-- 首页 -->
<template>
    <div class="home" >
        <!-- 搜索框 -->
        <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
        <!-- 轮播图 -->
        <Swiper :bannerArr='bannerArr'></Swiper>
        <!-- grid数组 -->
        <Grid :channelArr='channelArr'></Grid> 
        <!-- 品牌组件 -->
        <Brand :picArr="brandList"></Brand>
        <!--产品列表  周一周四·新品首发-->
        <ProductList :goodsList="newGoodsList" mytitle="周一周四·新品首发"></ProductList>
        <!-- 人气推荐 top组件 -->
        <Top :arr="hotGoodsList"></Top>
        <!-- 专题 -->
        <Zhuanti :topicList="topicList"></Zhuanti>
        <!-- 分类 -->
              <!-- 分类数据 -->
        <div v-for="item in categoryList" :key="item.id">
            <Fenlei
                :goodsList="item.goodsList"
                :mytitle="item.name"
            ></Fenlei>
        </div>
    </div>

</template>

<script>
// 导入首页数据请求
// 三步===引入-注册-使用
import  {getIndex} from "@/https/https" 

// 引入轮播图组件
import Swiper from '@/components/Swiper';

// 引入Grid组件
import Grid from '@/components/home/Grid';

// 引入品牌组件
import Brand from '@/components/home/Brand.vue';

// 引入产品列表 周一到周四
import ProductList from '@/components/home/ProductList.vue';

// 人气推荐 top组件
import Top from '@/components/home/Top.vue';

// 专题组件
import Zhuanti from '@/components/home/Zhuanti.vue';

// 分类
import Fenlei from '@/components/home/Fenlei';






 
export default {
    // name: '21181224Home',

    data() {
        return {
            value:"",          //搜索数据
            bannerArr: [],     //轮播图数组-定义一个数组
            channelArr:[],     //Grid数组
            brandList: [],     //品牌数据
            newGoodsList:[],   //产品列表
            hotGoodsList:[],   //人气推荐
            topicList:[],      //专题
            categoryList:[],   //居家
             



        }
    },

    components:{
        Swiper,
        Grid,
        Brand,
        ProductList,
        Top,
        Zhuanti,
        Fenlei,

    },

    created() {
        // 首页请求
        getIndex().then((res) => {
            console.log(res);
            // 轮播数据
            this.bannerArr = res.data.data.banner;
            // Grid 导航数据
            this.channelArr = res.data.data.channel;
            // 品牌数据
            this.brandList = res.data.data.brandList;
            // 产品列表
            this.newGoodsList = res.data.data.newGoodsList;
            // 人气推荐
            this.hotGoodsList = res.data.data.hotGoodsList;
            // 专题
            this.topicList = res.data.data.topicList;
            // 居家
            this.categoryList = res.data.data.categoryList;

        });  
    },

    methods: {
        
    },
};
</script>

<style lang="less">

</style>

